<template>
  <div>
    <el-row style="height: 100%;margin-bottom: 5%">
      <el-col :span="12" :offset="6">
        <div style="text-align: center">
          <h1 v-if="this.type!=='type'">{{ keywords }}</h1>
          <h1 v-if="this.type==='type'">{{ typeName}}</h1>
          <h3>搜索结果</h3>
        </div>
        <ul class="infinite-list">
          <li
            v-for="(activity, index) in activities"
            :key="index">
            <el-card shadow="always"
                     style="margin-bottom: 20px">
              <div style="margin-bottom: 20px; border-bottom: 1px solid gray">
                <el-link
                  :underline="false"
                  v-on:click.native="showBlog(activity)"
                  style="font-weight: 400; font-size: 26px">
                  <router-link to="/blog/showBlog" tag="span">
                    {{ activity.title }}
                  </router-link>
                </el-link>
              </div>
              <div class="introduction">
                <span style="padding-right: 10px"><i class="fa fa-user-o"
                                                     aria-hidden="true"></i> 作者：{{ activity.author }}
                </span>
                <span style="padding-right: 10px"><i class="fa fa-clock-o"
                                                     aria-hidden="true"></i> 发表于 {{ activity.createTime }}
                </span>
              </div>
              <div class="abstract">
                <span>
                  摘要：{{ activity.abstract }}...
                  <el-link
                    :underline="true"
                    v-on:click.native="showBlog(activity)" class="underline">
                    <router-link to="/blog/showBlog" tag="span">
                      &nbsp;阅读全文
                    </router-link>
                  </el-link>
                </span>
              </div>
              <div>
                <span><el-tag size="mini" @click.native="onSubmit(activity.tid,'type')">{{ activity.blogType }}</el-tag></span>
                <span class="tag">
                  <el-tag
                    type="warning"
                    v-for="label in activity.blogLabel"
                    :key="label"
                    style="margin: 2px"
                    size="mini"
                    @click.native="onSubmit(label,'label')">
                    <i class="fa fa-tag" aria-hidden="true"></i>
                    {{ label }}
                  </el-tag>
                </span>
                <div style="float: right; padding-right: 10px;color: #787977;"><i class="fa fa-comments"></i>
                  {{ activity.commentsNum }}
                </div>
                <div style="float: right; padding-right: 10px;color: #787977;"><i class="fa fa-eye"
                                                                                  aria-hidden="true"></i>
                  {{ activity.reads }}
                </div>
              </div>
            </el-card>
          </li>
        </ul>

        <el-button v-if="button" @click.native="load" style="display: block;margin: 0 auto">
          <span v-if="loading">加载更多</span>
          <span v-if="loadingIcon">加载中<i class="el-icon-loading"></i></span>
        </el-button>
        <p v-if="noMore" style="text-align: center">没有更多了</p>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import qs from 'qs'
import marked from "marked";

export default {
  name: "ShowSearchResults",
  data() {
    return {
      start: 0,
      activities: [],
      button: true,
      loading: true,
      loadingIcon: false,
      count: 0,
      keywords: '',
      typeName:'',
      type: '',
    }
  },
  computed: {
    noMore() {
      return this.count === this.activities.length;
    },
    disabled() {
      return this.loading || this.noMore
    },
  },
  methods: {
    load() {
      if (this.count > this.activities.length) {
        this.loadingIcon = true;
        this.loading = false;
        setTimeout(() => {
          this.start = this.start + 10;
          this.getSearchResult();
          this.loadingIcon = false;
          this.loading = true;
        }, 2000)
      }
    },
    onSubmit(id,type){
      this.$router.push({path:'/blog/search',query:{keyword:id, type:type}});
    },
    getSearchResult() {

      this.axios.post('/blog/searchBlog', qs.stringify({
        param: this.keywords,
        start: this.start,
        type: this.type,
      })).then((response) => {

        if (this.type === 'keyword') {
          this.count = response.data.count;
          let reg = /<\/?.+?\/?>/g;
          let regPre = /<pre>[\s\S]*<\/pre>/g;
          for (let i = 0; i < response.data.blogList.length; i++) {
            let labels = response.data.blogList[i].blogLabel.split(',');
            let blogs = {
              bid: '',
              tid: '',
              title: '',
              author: '',
              createTime: '',
              updateTime: '',
              blogLabel: [],
              blogType: '',
              reads: 0,
              likeNum: 0,
              article: '',
              editType: 1,
              abstract: '',
              commentsNum: 0,
            };
            for (let j = 0; j < labels.length; j++) {
              blogs.blogLabel.push(labels[j]);
            }
            blogs.bid = response.data.blogList[i].bid;
            blogs.tid = response.data.blogList[i].tid;
            blogs.title = response.data.blogList[i].title;
            blogs.blogType = response.data.blogList[i].blogType;
            blogs.createTime = response.data.blogList[i].createTime;
            blogs.updateTime = response.data.blogList[i].updateTime;
            blogs.reads = response.data.blogList[i].reads;
            blogs.likeNum = response.data.blogList[i].likeNum;
            blogs.article = response.data.blogList[i].article;
            blogs.editType = response.data.blogList[i].editorType;
            let abstr = '';
            if (blogs.editType === 2) {
              abstr = marked(response.data.blogList[i].article).replace(regPre, "");
            } else {
              abstr = response.data.blogList[i].article.replace(regPre, "");
            }
            blogs.abstract = abstr.replace(reg, "").substring(0, 80);

            this.axios.post("/user/queryUserById", qs.stringify({
              id: response.data.blogList[i].uid
            })).then((response) => {
              blogs.author = response.data.username;
            })

            this.axios.post("/blog/countCommentsNum", qs.stringify({
              bid: response.data.blogList[i].bid
            })).then((response) => {
              blogs.commentsNum = response.data;
            })
            this.activities.push(blogs);
          }
        } else {
          let reg = /<\/?.+?\/?>/g;
          let regPre = /<pre>[\s\S]*<\/pre>/g;
          for (let i = 0; i < response.data.length; i++) {
            let labels = response.data[i].blogLabel.split(',');
            let blogs = {
              bid: '',
              tid: '',
              title: '',
              author: '',
              createTime: '',
              updateTime: '',
              blogLabel: [],
              blogType: '',
              reads: 0,
              likeNum: 0,
              article: '',
              editType: 1,
              abstract: '',
              commentsNum: 0,
            };
            for (let j = 0; j < labels.length; j++) {
              blogs.blogLabel.push(labels[j]);
            }
            blogs.bid = response.data[i].bid;
            blogs.tid = response.data[i].tid;
            blogs.title = response.data[i].title;
            blogs.blogType = response.data[i].blogType;
            blogs.createTime = response.data[i].createTime;
            blogs.updateTime = response.data[i].updateTime;
            blogs.reads = response.data[i].reads;
            blogs.likeNum = response.data[i].likeNum;
            blogs.article = response.data[i].article;
            blogs.editType = response.data[i].editorType;
            let abstr = '';
            if (blogs.editType === 2) {
              abstr = marked(response.data[i].article).replace(regPre, "");
            } else {
              abstr = response.data[i].article.replace(regPre, "");
            }
            blogs.abstract = abstr.replace(reg, "").substring(0, 80);

            this.axios.post("/user/queryUserById", qs.stringify({
              id: response.data[i].uid
            })).then((response) => {
              blogs.author = response.data.username;
            })
            this.axios.post("/blog/countCommentsNum", qs.stringify({
              bid: response.data[i].bid
            })).then((response) => {
              blogs.commentsNum = response.data;
            })
            this.typeName = response.data[i].blogType;
            this.activities.push(blogs);
          }
        }
        if (this.activities.length === this.count) {
          this.button = false;
        }
      })
    },
    showBlog(blog) {
      this.$store.commit('setBlog', blog);
      sessionStorage.setItem("blogDetail", JSON.stringify(blog));
    },

    countBlogNum() {
      if (this.type === 'type') {
        this.axios.post('/blog/countBlogNumberByTid', qs.stringify({
          tid: this.keywords
        })).then((response) => {
          console.log(response.data);
          this.count = response.data;
          if (response.data <= 10) {
            this.button = false;
          }
        })
      } else if (this.type === 'label') {
        this.axios.post('/blog/queryClickRate', qs.stringify({
          label: this.keywords
        })).then((response) => {
          this.count = response.data;
          if (response.data <= 10) {
            this.button = false;
          }
        })
      }
    }
  },
  mounted() {

  },
  created() {
    this.keywords = this.$route.query.keyword;
    this.type = this.$route.query.type;
    this.countBlogNum()
    this.getSearchResult();
  }
}
</script>

<style scoped>
ul li {
  list-style-type: none;
}

ul {
  margin: 0;
  padding: 0;
}

.underline {
  text-decoration: underline;
}

.abstract {
  width: 100%;
  color: #555;
  font-size: 16px;
  line-height: 2;
  padding: 10px 0;
}

.tag {
  font-size: 12px;
  color: #999;
}
.el-tag{
  cursor: pointer;
}

.introduction {
  width: 100%;
  font-size: 12px;
  color: #999;
  padding: 10px 0;
}

.el-card {
  border-radius: 15px;
}

h1 {
  font-size: 40px;
  margin-bottom: 10px;
}

h3 {
}
</style>
